<template>
  <div v-loading="loading" class="dept-employee-list">
    <div class="search-form">
      <el-form :model="searchForm" size="mini" label-position="right" label-width="100px">
        <el-row>
          <el-col class="search-form-left">
            <el-row>
              <el-col :span="8">
                <el-form-item label="姓名:">
                  <el-input v-model="searchForm.userName" maxlength="20" clearable placeholder="请输入姓名"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="ERP编号:">
                  <el-input v-model="searchForm.erpNo" maxlength="10" clearable placeholder="请输入ERP编号"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="年份:">
                  <el-date-picker
                    v-model="searchForm.year"
                    v-blur
                    clearable
                    type="year"
                    placeholder="请选择年份"
                    value-format="yyyy"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col class="search-form-right">
            <el-col>
              <el-button type="primary" size="mini" @click="search">查询</el-button>
            </el-col>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="table-wrap">
      <el-table
        ref="table"
        style="width:100%"
        :data="tableData"
      >
        <el-table-column
          v-for="column in cloumns"
          :key="column.prop"
          :prop="column.prop"
          :label="column.label"
          :align="column.align"
          show-overflow-tooltip
        />
        <el-table-column label="操作" align="center" width="100px">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="check(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <page
        :hidden="tableData && tableData.length === 0"
        :total="total"
        :page.sync="pageNo"
        :limit.sync="pageSize"
        @pagination="handlePageChange"
      />
      <!-- 绩效积分 -->
      <el-dialog
        title="人员绩效信息"
        :visible.sync="jxjfVisible"
        width="600px"
        :close-on-click-modal="false"
        :append-to-body="true"
        center
      >
        <el-form label-position="right" size="mini" class="import-form" :model="jxjfForm" label-width="120" ref="jxjfForm">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="ERP编号：">
                <el-input type="text" v-model="jxjfForm.erpNo" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="姓名：">
                <el-input type="text" v-model="jxjfForm.userName" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="部门信息：">
                <el-input type="text" v-model="jxjfForm.deptName" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="时间：">
                <el-input type="text" v-model="jxjfForm.year" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="现薪档：">
                <el-input type="text" v-model="jxjfForm.salaryGrade" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="上年度剩余积分：">
                <el-input type="text" v-model="jxjfForm.remainPoint" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="年度绩效：">
                <el-input type="text" v-model="jxjfForm.perforGradeName" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { searchUserPerformanceScoreList } from '@/api/personInfoMange'
import axios from 'axios'
import Config from '@/config'
import { mapGetters } from 'vuex'
export default {
  name: 'PersonInfoMangeList',
  props: {
    currentDeptID: {
      type: String,
      default: ''
    },
    deptName: {
      type: String,
      required: true
    },
    isDept: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      cloumns: [
        {
          prop: 'erpNo',
          label: 'ERP编号',
          align: 'center'
        },
        {
          prop: 'userName',
          label: '姓名',
          align: 'center'
        },
        {
          prop: 'deptName',
          label: '部门',
          align: 'center'
        },
        {
          prop: 'year',
          label: '时间',
          align: 'center'
        },
        {
          prop: 'salaryGrade',
          label: '现薪档',
          align: 'center'
        },
        {
          prop: 'perforGradeName',
          label: '年度绩效',
          align: 'center'
        },
        {
          prop: 'remainPoint',
          label: '上年度剩余积分',
          align: 'center'
        }
      ],
      tableData: [],
      searchForm: {
        userName: '',
        erpNo: '',
        year: ''// 选择人员的erpNo以逗号拼接的字符串
      },
      total: 0,
      pageNo: 1,
      pageSize: 10,
      loading: false,
      cancel: null,
      checkedArr: [], // 选中的人员
      jxjfVisible:false,
      jxjfForm:{

      },
    }
  },
  computed: {
    ...mapGetters(['btns'])
  },
  watch: {
    currentDeptID(val) {
      if (val) {
        this.getList()
      }
    }
  },

  created() {
    if (this.currentDeptID) {
      this.getList()
    }
  },
  mounted(){
    let self = this
    document.onkeydown = function(e) {
      let ev = document.all ? window.event : e
      if (ev.keyCode === 13) {
        self.search()
      }
    }
  },
  activated() {
    this.getList()
  },
  methods: {
    search() {
      this.pageNo = 1
      this.getList()
    },

    check(row) {
      this.jxjfVisible = true
      this.jxjfForm = row
    },

    handlePageChange(pageInfo) {
      this.pageNo = pageInfo.page
      this.pageSize = pageInfo.limit
      this.getList()
    },
    async getList() {
      const CancelToken = axios.CancelToken
      try {
        if (this.cancel) {
          this.cancel(Config.ABORMESSAGE)
        }
        this.tableData = []
        this.loading = true
        const { data: { totalCount, result }} = await searchUserPerformanceScoreList({ pageNo: this.pageNo, pageSize: this.pageSize }, {
          baseorgId: this.currentDeptID,
          ...this.searchForm
        }, new CancelToken((c) => {
          this.cancel = c
          c.message = '取消请求'
        })
        )
        this.tableData = result
        this.total = totalCount
        this.loading = false
      } catch (err) {
        if (err.errorMsg !== Config.ABORMESSAGE) {
          // 如果不是主动取消请求，在接口请求出错时要将loading状态置为false
          this.loading = false
          console.error('获取人员列表出错', err)
        }
      }
    },
  },
  beforeRouteLeave(to, from, next) {
    if (to.name !== 'personInfoManage.manage.detail') {
      this.$store.commit('app/SET_KEEP_ALIVE', [])
    }
    next()
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.$store.commit('app/SET_KEEP_ALIVE', ['PersonInfoMangeList'])
    })
  }
}
</script>

<style lang="scss" scoped>
.dept-employee-list{
  height: 100%;
  .search-form-left{
    width: calc(100% - 180px);
  }
  .search-form-right{
    width: 180px;
    padding: 0 15px;
  }
  .table-wrap{
    height: calc(100% - 84px);
    overflow-y: auto;
  }
}

</style>
